<template>
	<view>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-else class="viewbox">
			<view class="bj_img" v-for="(item,index) in index_banner">
				<u-image :src="item.img" :lazy-load="true" mode="widthFix" width="auto"></u-image>
			</view>
			<view class="index_a">快速提升人事效率，立即预约0元试用</view>
			<view class="index_b">该系统不接受50人以下团队试用，请谨慎填写</view>
			<view class="index_c">
				<view class="index_c_a">您的姓名(已加密)</view>
				<view class="index_c_b">
					<u--input
					    placeholder="请输入姓名"
					    border="bottom"
						fontSize="30rpx"
					    clearable
						@change="change_name"
					  ></u--input>
				</view>
				<view class="index_c_a">您的电话(已加密)</view>
				<view class="index_c_b">
					<u--input
					    placeholder="请输入电话"
					    border="bottom"
						fontSize="30rpx"
					    clearable
						@change="change_tel"
					  ></u--input>
				</view>
				<view class="index_c_a">您的公司(已加密)</view>
				<view class="index_c_b">
					<u--input
					    placeholder="请输入公司名称"
					    border="bottom"
						fontSize="30rpx"
					    clearable
						@change="change_company"
					  ></u--input>
				</view>
				<view class="index_c_a">公司规模(已加密)(单选)</view>
				<view class="index_c_c">
					<radio-group @change="scaleChange">
						<label class="index_c_c_a" v-for="(item, index) in corporate_scale">
							<radio :value="item" class="index_c_c_a_a"/>
							<view class="index_c_c_a_b">{{item}}</view>
						</label>
					</radio-group>
				</view>
				<view class="index_c_a">需要了解哪些功能模块？</view>
				<view class="index_c_c">
					<checkbox-group @change="moduleChange">
						<label class="index_c_c_a" v-for="(item, index) in functional_module">
							<checkbox :value="item" class="index_c_c_a_a"/>
							<view class="index_c_c_a_b">{{item}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="index_c_d">
					<checkbox-group @change="checkboxChange">
						<label class="index_c_d_a">
							<checkbox value="1" class="index_c_c_a_a"/>
							<view class="index_c_d_a_a">自动输入历史手机号</view>
						</label>
					</checkbox-group>
					<view class="index_c_d_b" @click="is_empower = true;">《个人信息授权与保护声明》</view>
				</view>
				<view class="index_c_e" @click="data_submit()">
					立即预约，享0元试用
				</view>
			</view>
			<view class="index_d">为什么选择i人事？</view>
			<view class="index_e">
				<view class="index_e_a" v-for="(item,index) in renshi">
					<image :src="item.img"></image>
				</view>
			</view>
			<view class="index_f">
				<view class="index_f_a">人力资源七大模块</view>
				<view class="index_f_b">数据贯穿员工从入职到离职全程</view>
				<view class="index_f_c">
					<u-swiper :list="qibankuai" height="389rpx" bg-color="#E4E4E4"></u-swiper>
				</view>
			</view>
			<view class="bj_img" v-for="(item,index) in qita">
				<u-image :src="item.img" :lazy-load="true" mode="widthFix" width="auto"></u-image>
			</view>
			<view style="width: 750rpx;height: 156rpx;"></view>
			<view class="index_g">
				<view class="index_g_a">
					<view class="index_g_a_a" @click="callPhoneNumber()" :style="'background-image:url('+tel_bj+');'">电话询问报价</view>
					<view class="index_g_a_b" @click="miaodian()">
						<view class="index_g_a_b_a">立即预约报价</view>
					</view>
				</view>
				<view class="index_g_b">
					<view class="index_g_b_a">
						{{corporate_name}} |
					</view>
					<view class="index_g_b_b" @click="is_protect = true;">
						《个人信息保护声明》
					</view>
				</view>
			</view>
			<u-popup :show="is_protect" closeable="true" @close="close" mode="bottom" closeIconPos="top-right" closeOnClickOverlay="true">
				<view class="u-popup-slot">
					<u-parse :content="protect" class="index_h"></u-parse>
				</view>
			</u-popup>
			<u-popup :show="is_empower" closeable="true" @close="close" mode="bottom" closeIconPos="top-right" closeOnClickOverlay="true">
				<view class="u-popup-slot">
				<u-parse :content="empower" class="index_h"></u-parse>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';	
export default {
	data() {
		return {
			index_banner:[],
			renshi: [],
			qibankuai: [],
			qita: [],
			tel_name: '',
			functional_module:[],
			corporate_scale:[],
			corporate_name:'',
			protect:'',
			empower:'',
			is_protect:false,
			is_empower:false,
			showLoading:true,
			
			username:'',
			mobile:'',
			company:'',
			module:[],
			scale:'',
			is_checkbox:0,
			tel_bj:request.baseUrl_img+'/tel_bj.png'
		}
	},
	onShareAppMessage(res) { //发送给朋友
		return {
			title:'i人事一薪资绩效考勤系统',
			path:'/pages/home/vendor'
		}
	},
	onShareTimeline(res) {//分享到朋友圈
		return {
			title:'i人事一薪资绩效考勤系统',
			path:'/pages/home/vendor'
		}
	},
	mounted() {
		this.index_vendor();
	},
	methods: {
		close() {
			this.is_protect = false;
			this.is_empower = false;
		},
		moduleChange(n) {
			this.module=n.detail.value;
		},
		scaleChange(n) {
			this.scale=n.detail.value;
		},
		checkboxChange(n) {
			if(n.detail.value==1){
				this.is_checkbox=1;
			}else{
				this.is_checkbox=0;
			}
		},
		change_name(n) {
			this.username=n;
		},
		change_tel(n) {
			this.mobile=n;
		},
		change_company(n) {
			this.company=n;
		},
		data_submit(){
			if(!this.username){
				uni.showToast({
				    title:'请输入姓名',
				    duration: 2000
				});
				return false;
			}
			if(!this.mobile){
				uni.showToast({
				    title:'请输入电话',
				    duration: 2000
				});
				return false;
			}
			if(!this.company){
				uni.showToast({
				    title:'请输入公司',
				    duration: 2000
				});
				return false;
			}
			if(!this.scale){
				uni.showToast({
				    title:'请选择公司规模',
				    duration: 2000
				});
				return false;
			}
			if(this.module.length===0){
				uni.showToast({
				    title:'请选择功能模块',
				    duration: 2000
				});
				return false;
			}
			if(this.is_checkbox!=1){
				uni.showToast({
				    title:'请授权个人信息与保护声明',
				    duration: 2000
				});
				return false;
			}
			uni.showLoading({
				title: '正在提交..',
				mask: true
			})
			let paramsList = {
				module: this.module,
				scale: this.scale,
				username: this.username,
				mobile: this.mobile,
				company: this.company,
			}
			let optsList = {
				url: 'index/data_submit',
				method: 'post'
			};
			request.httpRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				uni.showToast({
					title: res.data.msg,
					duration: 2000
				});
			});
		},
		//拨打固定电话
		callPhoneNumber() {
			console.log(this.tel_name);
			uni.makePhoneCall({
				phoneNumber: this.tel_name+"",
				// 成功回调
				success: (res) => {
					console.log('调用成功!')
				},
				// 失败回调
				fail: (res) => {
					console.log(res)
					//this.callPhoneNumber();//重复调用一次
				}
			});
		},
		miaodian(){
			uni.createSelectorQuery().select('.index_c').boundingClientRect(data=>{//目标位置节点 类或者 id 
				uni.createSelectorQuery().select(".viewbox").boundingClientRect((res)=>{//最外层盒子节点类或者 id
				　　　　uni.pageScrollTo({
				　　　　　　duration:0,//过渡时间
				　　　　　　scrollTop:data.top - res.top  ,//到达距离顶部的top值
				　　　　})
				　　}).exec()
			}).exec();
		},
		index_vendor(){
			let paramsList = {}
			let optsList = {
				url: 'index/home',
				method: 'post'
			};
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					console.log(res.data.data);
					this.index_banner=res.data.data.index_banner;
					this.renshi=res.data.data.renshi;
					this.qibankuai=res.data.data.qibankuai;
					this.qita=res.data.data.qita;
					this.tel_name=res.data.data.tel;
					this.functional_module=res.data.data.functional_module;
					this.corporate_scale=res.data.data.corporate_scale;
					this.corporate_name=res.data.data.corporate_name;
					this.protect=res.data.data.protect;
					this.empower=res.data.data.empower;
					this.showLoading=false;
				}else{
					uni.showToast({
					    title: res.data.msg,
					    duration: 2000
					});
					this.index_vendor();
				}
			});
		},
	}
}
</script>

<style  lang="scss" scoped>
	.u-popup-slot {
		width: 750rpx;
		height: 1000rpx;
		background-color: #FFFFFF;
		z-index: 111;
		overflow: hidden;
		overflow-y: auto;
		padding: 25rpx;
	}
	.bj_img{
		width:100%;
		height: 100%;
		overflow: hidden;
		
	}	
	.index_a{
		margin: 12rpx;
		font-size: 43rpx;
		font-family: Adobe Heiti Std;
		font-weight: bold;
		color: #CE2626;
		text-align: center;
	}
	.index_b{
		margin: 12rpx;
		font-size: 33rpx;
		font-family: Adobe Heiti Std;
		font-weight: bold;
		color: #CE2626;
		text-align: center;
	}
	.index_c{
		margin:28rpx;
		width: 687rpx;
		overflow: hidden;
	}
	.index_c_a{
		color: inherit;
		font-weight: 500;
		font-size: 30rpx;
		font-family: SimHei;
		font-weight: 400;
		color: #707070;
	}
	.index_c_b{
		margin-bottom: 48rpx;
	}
	.index_c_c{
		//width: 100rpx;
		overflow: hidden;
		height: auto;
		margin-top: 28rpx;
		margin-bottom: 50rpx;
	}
	.index_c_c_a{
		font-size: 26rpx;
		font-family: SimHei;
		font-weight: 400;
		color: #333333;
		float: left;
		margin-right: 10rpx;
	}
	.index_c_c_a_a{
		transform: scale(0.6,0.6);
		float: left;
	}
	.index_c_c_a_b{
		float:left;
		line-height: 48rpx;
	}
	.index_c_d{
		font-size: 20rpx;
		font-family: SimHei;
		font-weight: 400;
		color: #AFAFAF;
		overflow: hidden;
	}
	.index_c_d_a{
		float: left;
		width: 242rpx;
		
	}
	.index_c_d_a_a{
		float:left;
		line-height: 49rpx;
	}
	.index_c_d_b{
		font-size: 21rpx;
		font-family: SimHei;
		font-weight: 400;
		color: #2B9DED;
		line-height: 49rpx;
		loat: left;
	}
	.index_c_e{
		width: 652rpx;
		height: 97rpx;
		background: #C91010;
		border-radius: 49rpx;
		font-size: 40rpx;
		font-family: Adobe Heiti Std;
		font-weight: bold;
		color: #FFFFFF;
		line-height:97rpx;
		text-align: center;
		margin-top: 56rpx;
		margin-left: 20rpx;
	}
	.index_d{
		margin-top: 36rpx;
		font-size: 73rpx;
		font-family: SourceHanSansSC;
		font-weight: bold;
		color: #F59105;
		text-align: center;
	}
	
	.index_e{
		margin-top: 46rpx;
		margin-left: 30rpx;
		overflow: hidden;
	}
	.index_e_a{
		width: 217rpx;
		height: 199rpx;
		margin-bottom: 26rpx;
		float: left;
		margin-right: 18rpx;
	}
	.index_e_a image{
		width: 217rpx;
		height: 199rpx;
	}
	.index_f{
		width: 750rpx;
		height: 581rpx;
		background-color: #E4E4E4;
		margin-top: 40rpx;
	}
	.index_f_a{
		padding-top: 49rpx;
		margin-left: 26rpx;
		margin-right: 26rpx;
		text-align: center;
		font-size: 48rpx;
		font-family: SourceHanSansSC;
		font-weight: bold;
		color: #4DAFAD;
	}
	.index_f_b{
		margin-left: 26rpx;
		margin-right: 26rpx;
		text-align: center;
		font-size: 48rpx;
		font-family: SourceHanSansSC;
		font-weight: bold;
		color: #4DAFAD;
	}
	.index_f_c{
		width: 750rpx;
		height: 389rpx;
		background-color: #E4E4E4;
		margin-top: 13rpx;
	}
	.index_h{
		margin: 20rpx;
		margin-top: 85rpx;
	}
	.index_g{
		width: 750rpx;
		height: 156rpx;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 100;
	}
	.index_g_a{
		width: 100%;
		height: 96rpx;
	}
	.index_g_a_a{
		float: left;
		width: 25%;
		background-repeat: no-repeat;
		background-position: center 14rpx;
		font-size: 25rpx;
		height: 95rpx;
		line-height: 134rpx;
		text-align: center;
	}
	.index_g_a_b{
		float: right;
		width: 75%;
		height: 95rpx;
	}
	.index_g_a_b_a{
		background: rgb(197, 47, 17) none repeat scroll 0% 0%;
		border-radius:40rpx;
		color: #fff;
		font-size: 33rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-top: 15rpx;
	}
	.index_g_b{
		background:#f8f8f8;
		height: 60rpx;
		text-align: center;
	}
	.index_g_b_a{
		line-height: 60rpx;
		float:left;
		color: #999;
		text-align: right;
		width: 50%;
		font-size: 22rpx;
	}
	.index_g_b_b{
		line-height: 60rpx;
		float: left;
		color: #4e90ff;
		text-align: left;
		width: 50%;
		font-size: 22rpx;
	}
</style>
